import React from "react"
import Scroll from '@/baseUI/scroll/index'
import { ShopBox, ShopContainer, Delete } from './ShoppingCart.style.js'
import { useHistory } from "react-router-dom"

const ShoppingCart = (props) => {
    const { cartdata, select_btn, reduce_btn, add_btn, 
        Enter_btn, delelte_btn, select_all, buy_btn, isAllSelected, allMoney } = props
    console.log(cartdata);
    const history = useHistory()
    const gotodetail = (id) => {
        history.push(`/detail/${id}`)
    }

    return (
        <>
            <ShopContainer>
                <div className="shop_container">
                    <div className="shopBox">
                        {
                            cartdata.length ? cartdata.map((item) => (
                                <div key={item.id} className="scrollcontainer">
                                    <Scroll
                                        direction={"horizental"}
                                    >
                                        <div className='scroll'>
                                            <ShopBox key={item.id} >
                                                <div className="item">
                                                    <div className="logo" onClick={() => select_btn(item)}>
                                                        {
                                                            item.isChecked
                                                            ? <svg t="1642071808127" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5274" width="32" height="32"><path d="M887.254 353.743c-20.511-48.423-49.759-91.872-87.139-129.251s-80.828-66.628-129.251-87.139c-50.123-21.238-103.402-31.918-158.257-31.918s-108.134 10.801-158.257 31.918c-48.423 20.511-91.872 49.759-129.251 87.139-37.379 37.379-66.628 80.828-87.139 129.251-21.238 50.123-31.918 103.402-31.918 158.257s10.801 108.134 31.918 158.257c20.511 48.423 49.759 91.872 87.139 129.251 37.379 37.379 80.828 66.628 129.251 87.139 50.123 21.238 103.402 31.918 158.257 31.918s108.134-10.801 158.257-31.918c48.423-20.511 91.872-49.759 129.251-87.139 37.379-37.379 66.628-80.828 87.139-129.251 21.238-50.123 31.918-103.402 31.918-158.257s-10.801-108.134-31.918-158.257z m-146.849 48.18L460.178 682.15c-11.286 11.286-29.855 11.286-41.142 0L275.827 538.941c-11.286-11.286-11.286-29.855 0-41.142 11.286-11.286 29.855-11.286 41.142 0l122.576 122.576 259.596-259.596c11.286-11.286 29.855-11.286 41.142 0 11.408 11.286 11.408 29.733 0.122 41.142z" p-id="5275" fill="#d81e06"></path></svg>
                                                            : <svg t="1642071921078" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6242" width="32" height="32"><path d="M510.44304 940.315042c-237.326197 0-430.396447-193.21249-430.396447-430.695253 0-237.502206 193.07025-430.717765 430.396447-430.717765 237.303684 0 430.40668 193.236026 430.40668 430.717765C940.84972 747.101529 747.791749 940.315042 510.44304 940.315042zM510.44304 124.414591c-212.213239 0-384.861368 172.782182-384.861368 385.182686 0 212.403574 172.647105 385.161197 384.861368 385.161197 212.224496 0 384.870578-172.782182 384.870578-385.161197C895.314641 297.196773 722.667535 124.414591 510.44304 124.414591z" p-id="6243" fill="#e6e6e6"></path></svg>
                                                        }
                                                    </div>
                                                    <div className="shop_item">
                                                        <div className="activity">距优惠结束还剩12小时</div>
                                                        <div className="shop_img" onClick={() => gotodetail(item.id)}>
                                                            <img src={item.img} alt="" />
                                                        </div>
                                                        <div className="txt_box">
                                                            <div className="shop_desc" onClick={() => gotodetail(item.id)}>
                                                                {item.title}
                                                            </div>
                                                            {/* <div className="class">
                                                                <span>3支装(9ml*3)</span>
                                                                <svg t="1642087336371" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4000" width="16" height="16"><path d="M512.726547 675.318646c-8.063653 0-15.790638-3.245927-21.435195-9.006118L231.175103 400.906809c-11.603269-11.837606-11.410887-30.840402 0.427742-42.442648 11.837606-11.601222 30.841426-11.410887 42.442648 0.427742l238.681054 243.534596L751.407602 358.891903c11.601222-11.839653 30.602995-12.033058 42.442648-0.427742 11.839653 11.603269 12.031011 30.605042 0.427742 42.442648L534.161742 666.312528C528.517185 672.072719 520.791224 675.318646 512.726547 675.318646z" p-id="4001" fill="#2c2c2c"></path></svg>
                                                            </div> */}
                                                            <div className="prize" onClick={() => gotodetail(item.id)}>
                                                                <svg t="1642163556702" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2869" width="16" height="16"><path d="M851.2 57.6 608 465.066667l211.2 0 0 72.533333L561.066667 537.6l0 115.2 260.266667 0L821.333333 725.333333 561.066667 725.333333l0 241.066667-96 0L465.066667 725.333333 206.933333 725.333333l0-72.533333 258.133333 0 0-115.2L206.933333 537.6l0-72.533333 211.2 0L172.8 57.6l106.666667 0 234.666667 401.066667L746.666667 57.6 851.2 57.6z" p-id="2870" fill="#ea7276"></path></svg>
                                                                {item.price}
                                                            </div>
                                                            <div className="button">
                                                                <button className="less"
                                                                    disabled={item.num == 1 ? true : false}
                                                                >
                                                                    <div onClick={() => { reduce_btn(item.id) }}>
                                                                        <svg t="1642085663792" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2156" width="32" height="32"><path d="M128 503.467c0-17.067 17.067-34.134 34.133-34.134h699.734c17.066 0 34.133 17.067 34.133 34.134S878.933 537.6 861.867 537.6H162.133c-17.066 0-34.133-17.067-34.133-34.133z" p-id="2157" fill="#2c2c2c"></path></svg>
                                                                    </div>
                                                                </button>
                                                                <input className="num" type="number" placeholder={item.num}
                                                                    onKeyDown={(e) => Enter_btn(e, item.id)}
                                                                    step="0"
                                                                />
                                                                <button className="more"
                                                                    disabled={item.num == 1 ? true : false}
                                                                >
                                                                    <div onClick={() => { add_btn(item.id) }}>
                                                                        <svg t="1642085704263" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3204" width="32" height="32"><path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#444444" p-id="3205"></path></svg>
                                                                    </div>
                                                                </button>
                                                            </div>
                                                        </div>
                                                        {/* <div className="tag_box">
                                                            <div className="tag">自营仓商品满99免邮</div>
                                                            <div className="tag">30天退换</div>
                                                            </div> */}
                                                    </div>
                                                </div>
                                            </ShopBox>
                                            <Delete>
                                                <div onClick={() => { delelte_btn(item.id) }} className="11">
                                                    <svg t="1642522436766" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2107" width="32" height="32"><path d="M110.325 231.601h83.275l38.767 682.942c0.779 14.201 12.565 25.316 26.793 25.316h508.28c14.229 0 26.015-11.141 26.793-25.342l38.148-682.917h83.331c14.846 0 26.848-12.027 26.848-26.845 0-14.82-12.002-26.847-26.848-26.847h-210.236l-13.109-70.256c0-14.82-12-26.848-26.849-26.848h-305.029c-14.846 0-26.846 12.028-26.846 26.848l-13.109 70.256h-210.184c-14.847 0-26.847 12.027-26.847 26.847 0 14.819 11.974 26.846 26.821 26.846zM387.336 134.5h251.338l13.108 43.411h-277.554l13.109-43.411zM778.608 231.601l-36.563 654.593h-457.516l-37.156-654.592h531.234zM380.075 835.857c0.538 0 1.020 0 1.557-0.026 14.819-0.832 26.121-13.531 25.263-28.325l-28.242-497.594c-0.833-14.819-13.88-25.961-28.324-25.289-14.818 0.833-26.122 13.53-25.263 28.323l28.243 497.594c0.805 14.283 12.645 25.317 26.766 25.317zM643.436 835.832c0.539 0.026 1.022 0.026 1.557 0.026 14.121 0 25.961-11.033 26.767-25.317l28.242-497.594c0.833-14.792-10.469-27.489-25.262-28.323-14.579-0.618-27.465 10.47-28.324 25.289l-28.242 497.594c-0.833 14.794 10.47 27.492 25.261 28.325zM513.019 835.857c14.847 0 26.847-12.026 26.847-26.846v-497.595c0-14.818-12-26.847-26.847-26.847-14.846 0-26.846 12.029-26.846 26.847v497.595c0 14.82 12 26.846 26.846 26.846z" p-id="2108" fill="#ffffff"></path></svg>
                                                </div>
                                            </Delete>
                                        </div>
                                    </Scroll>
                                </div>
                            )) : ""
                        }
                    </div>
                    {/* <Scroll
            direction={"vertical"}
          >
            
          </Scroll> */}
                </div>
                <div className="bottom_menu">
                    <div className="logo" onClick={() => select_all()}>
                        {
                            isAllSelected ? <svg t="1642071808127" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5274" width="32" height="32"><path d="M887.254 353.743c-20.511-48.423-49.759-91.872-87.139-129.251s-80.828-66.628-129.251-87.139c-50.123-21.238-103.402-31.918-158.257-31.918s-108.134 10.801-158.257 31.918c-48.423 20.511-91.872 49.759-129.251 87.139-37.379 37.379-66.628 80.828-87.139 129.251-21.238 50.123-31.918 103.402-31.918 158.257s10.801 108.134 31.918 158.257c20.511 48.423 49.759 91.872 87.139 129.251 37.379 37.379 80.828 66.628 129.251 87.139 50.123 21.238 103.402 31.918 158.257 31.918s108.134-10.801 158.257-31.918c48.423-20.511 91.872-49.759 129.251-87.139 37.379-37.379 66.628-80.828 87.139-129.251 21.238-50.123 31.918-103.402 31.918-158.257s-10.801-108.134-31.918-158.257z m-146.849 48.18L460.178 682.15c-11.286 11.286-29.855 11.286-41.142 0L275.827 538.941c-11.286-11.286-11.286-29.855 0-41.142 11.286-11.286 29.855-11.286 41.142 0l122.576 122.576 259.596-259.596c11.286-11.286 29.855-11.286 41.142 0 11.408 11.286 11.408 29.733 0.122 41.142z" p-id="5275" fill="#d81e06"></path></svg> :
                                <svg t="1642071921078" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6242" width="32" height="32"><path d="M510.44304 940.315042c-237.326197 0-430.396447-193.21249-430.396447-430.695253 0-237.502206 193.07025-430.717765 430.396447-430.717765 237.303684 0 430.40668 193.236026 430.40668 430.717765C940.84972 747.101529 747.791749 940.315042 510.44304 940.315042zM510.44304 124.414591c-212.213239 0-384.861368 172.782182-384.861368 385.182686 0 212.403574 172.647105 385.161197 384.861368 385.161197 212.224496 0 384.870578-172.782182 384.870578-385.161197C895.314641 297.196773 722.667535 124.414591 510.44304 124.414591z" p-id="6243" fill="#e6e6e6"></path></svg>
                        }
                    </div>
                    <div className="all_btn" >全选</div>
                    <div className="prize">
                        <svg t="1642093004182" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9284" width="20" height="20"><path d="M883 552.5v-87.7H617.8L864.9 107l-73-48-272.6 394.9L246 59.4 172.3 106l247.5 358.8H154.9v87.1h320v90.2h-320V731h320v234h88.7V729.8H883v-86.5H563.6v-89.5z" p-id="9285" fill="#dd1a21"></path></svg>
                        {allMoney}
                    </div>
                    <div className="bug" onClick={buy_btn.bind(null, cartdata)}>下单</div>
                </div>
            </ShopContainer>
        </>
    )
}

export default ShoppingCart